<!-- Ana Luisa Figon Treviño -->
<!DOCTYPE html>
<html>
	<head>		
		<meta charset="utf-8">
		<title>About Me</title>
		<style type="text/css">
			.itemList{
				color: gray;
			}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script type="text/javascript">
			function eso(){
				var myArray = [" Annie"," Read and Play videogames"," Ciudad Madero"];
				$("body").css("font-family","Arial");

				var spans = $('span');
				spans.each(function(index,elem){
					var span = $(elem);
					span.addClass('itemList');
					span.html(myArray[index]); 
				});

				var image = $("<img src='http://www.thegamercat.com/wordpress/comics/2011-12-28-1112gamercatcomic_fairyfountain.jpg' widht=50% height=50%>");
				$('body').prepend(image);

			}
		</script>
	</head>
	<body>

		<h1>About Me</h1>
		<ul>
			<li>Nickname: <span id='nickname'></span></li>
			<li>Favorites: <span id='favorites'></span></li>
			<li>Hometown: <span id='hometown'></span></li>
		</ul>
		<input type='button' onClick='eso();' value="click">
	</body>

</html>